<template>
    <div>
        <!-- 搜索区域 -->
        <NCard>
            <NForm inline labelWidth="auto" labelAlign="right" :model="queryForm" labelPlacement="left"
                :showFeedback="false">
                <NGrid cols="1 200:2 600:3 1200:4" :y-gap="12" :x-gap="24">
                    <NFormItemGi label="账号" path="userCode">
                        <NInput v-model:value="queryForm.userCode" placeholder="请输入" clearable />
                    </NFormItemGi>
                    <NGridItem suffix>
                        <NSpace justify="end">
                            <NButton type="default" @click="reset">
                                重置
                            </NButton>
                            <NButton type="primary" @click="handleQuery">
                                查询
                            </NButton>
                        </NSpace>
                    </NGridItem>
                </NGrid>
            </NForm>
        </NCard>
        <!-- 表单区域 -->
        <NCard title="用户列表" class="list-card">
            <NDataTable striped remote :loading="loading" :columns="columns" :data="dataList" :pagination="pagination"
                :bordered="false">
            </NDataTable>
        </NCard>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { userApi } from "@/api";

const dataList = ref();
const loading = ref(false);
const pagination = reactive({
    page: 1,
    pageSize: 10,
    itemCount: 0,
    showQuickJumper: true,
    showSizePicker: true,
    pageSizes: [10, 50, 100],
    onChange: (page: number) => {
        pagination.page = page;
        query();
    },
    onUpdatePageSize: (pageSize: number) => {
        pagination.pageSize = pageSize;
        pagination.page = 1;
        query();
    },
    prefix: (info) => {
        return `共${info.itemCount}项数据`;
    },
});
const columns = [
    {
        title: "账号",
        key: "userCode",
    },
    {
        title: "密码",
        key: "password",
    },
    {
        title: "邮箱",
        key: "email",
    },
    {
        title: "创建时间",
        key: "createTime",
    },
    {
        title: "更新时间",
        key: "updateTime",
    },
];

const tempQueryForm = {
    userCode: null,
};

const queryForm = ref({
    ...tempQueryForm,
});

const query = () => {
    loading.value = true;
    let params = {
        ...queryForm.value,
        page: pagination.page,
        size: pagination.pageSize,
    }
    userApi.page(params).then((res) => {
        if (res.code === 200) {
            dataList.value = res.data?.list;
            pagination.itemCount = res.data?.totalCount;
        }
    }).finally(() => {
        loading.value = false;
    })
}

const reset = () => {
    pagination.page = 1;
    pagination.pageSize = 10;
    queryForm.value = { ...tempQueryForm };
    query();
};
const handleQuery = () => {
    pagination.page = 1;
    query();
};

onMounted(() => {
    query();
});
</script>

<style scoped lang="less">
.list-card {
    margin-top: 24px;
}
</style>